<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例"></meta>
    <title>路径-车辆运动</title>
    <!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        input {
            width: 350px;
        }

        .checkbox {
            display: inline-block;
            margin: 5px 0;
            cursor: pointer;
        }
        
        .fly {
            width: 20px;
            height: 16px;
        }

        .defultbtn {
            display: inline-block;
            text-align: center;
            min-width: 60px;
            height: 38px;
            padding: 0 10px;
            line-height: 38px;
            border-radius: 100px;
            border: 1px solid #C9C9C9;
            background-color: #FFF;
            color: #555;
            cursor: pointer;
        }

        .defultbtn:hover {
            background-color: #b3daf8;
        }

        .btnon {
            background-color: #1E9FFF;
            color: #fff;
            border: 1px solid #1E9FFF;
        }
    </style>
</head>

<body>
    <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
        <earth-comp></earth-comp>
    </div>

    <script>
        // 1 创建Earth的vue组件
        var EarthComp = {
            template: `
                <div style="width: 100%; height: 100%">
                    <div ref="earthContainer" style="width: 100%; height: 100%">
                    </div>
                    <div class="box" style="position: absolute; left: 18px; top: 18px; color: white; background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 25px;min-width:200px; font-size:24px; font-family: 宋体;">
                        <div class="defultbtn" :class="{'btnon':playing}" @click="playing = !playing">路径播放</div>
                        <div class="defultbtn" style="margin-left:20px;" :class="{'btnon':cameraAttached}"  @click=cameraAttachedClick>相机绑定</div><br/>
                        <span @click="show = !show" class="checkbox"><input class="fly" type="checkbox" v-model="show">路径显隐</span><br/>
                        <span>当前速度: {{ currentSpeed }}m/s</span><br/>
                        <span><input type="range" min="0" max="100" step="1" v-model.number="currentSpeed"></span><br/>
                        <span>当前位置：{{currentD | numFilter}}米</span>
                    </div>
                </div>
            `,
            data() {
                return {
                    _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
                    _model: undefined,
                    _uw1: undefined,
                    _uw2: undefined,
                    show: true, // 控制路径的显示与隐藏，默认为隐藏
                    // 当前播放速度，单位为米/秒。
                    // 注意，此属性可以实时修改，修改后的速度立即生效，所以可以动态修改路径上物体的前进速度！
                    currentSpeed: 0,
                    // 当前步进距离
                    // 指当前播放状态下由第一个关键点沿路径运动到当前位置的长度，单位是米。
                    // 当前playing属性为false时，此属性恒定不变；当playing为true，此属性会自动增加。 随着currentD的变化，会实时计算currentPosition、currentRotation这两个属性。 currentPosition指当前位置，currentRotation指当前姿态
                    currentD: 0,
                    playing: true,
                    cameraAttached: false
                };
            },
            // 1.1 资源创建
            mounted() {
                // 1.1.1 创建地球
                var earth = new XE.Earth(this.$refs.earthContainer);

                earth.sceneTree.root = {
                    "children": [
                        {
                            "czmObject": {
                                "xbsjType": "Imagery",
                                "name": "谷歌影像",
                                "xbsjImageryProvider": {
                                    "XbsjImageryProvider": {
                                        "url": "//www.google.cn/maps/vt?lyrs=s,h&gl=CN&x={x}&y={y}&z={z}",
                                        "srcCoordType": "GCJ02",
                                        "dstCoordType": "WGS84",
                                        "maximumLevel": 21,
                                    },
                                }
                            },
                        },
                        {
                            "czmObject": {
                                "xbsjType": "Terrain",
                                "name": "地形",
                                "xbsjTerrainProvider": {
                                    "type": "XbsjCesiumTerrainProvider",
                                    "XbsjCesiumTerrainProvider": {
                                        "url": "//lab.earthsdk.com/terrain/577fd5b0ac1f11e99dbd8fd044883638",
                                    }
                                },
                            }
                        },
                        {
                            "czmObject": {
                                "xbsjType": "Model",
                                "url": "../assets/GroundVehicle/GroundVehicle.glb",
                                "minimumPixelSize": 128,
                                "maximumScale": 20000,
                                "xbsjPosition": [
                                    2.031386871284619,
                                    0.6963602243423457,
                                    45.19419999485407
                                ],
                            },
                            "ref": "model1",
                        }, {
                            "ref": 'path1',
                            "czmObject": {
                                "xbsjType": "Path",
                                "positions": [
                                    [
                                        2.0314421272284564,
                                        0.6963650944792629,
                                        40.65611668665132
                                    ],
                                    [
                                        2.0314220571129757,
                                        0.6963639456201629,
                                        46.382332288421615
                                    ],
                                    [
                                        2.0313931372810865,
                                        0.6963627444128099,
                                        43.13414414692021
                                    ],
                                    [
                                        2.0313840894485526,
                                        0.69635790310245,
                                        46.580380375179246
                                    ],
                                    [
                                        2.0313922171837313,
                                        0.696348517663492,
                                        47.328487919487394
                                    ],
                                    [
                                        2.0314140926143605,
                                        0.6963421174797247,
                                        46.791225241306805
                                    ],
                                    [
                                        2.0314364123581563,
                                        0.6963467615451054,
                                        45.14771160802308
                                    ],
                                    [
                                        2.0314475085468855,
                                        0.6963597773204707,
                                        42.15277970580725
                                    ]
                                ],
                                "rotations": [
                                    [
                                        5.022435025507999,
                                        0,
                                        0
                                    ],
                                    [
                                        4.842468050798922,
                                        0,
                                        0
                                    ],
                                    [
                                        -2.070014612817267,
                                        0,
                                        0
                                    ],
                                    [
                                        2.7424592911893253,
                                        0,
                                        0
                                    ],
                                    [
                                        2.182323258249788,
                                        0,
                                        0
                                    ],
                                    [
                                        1.5988711537994935,
                                        0,
                                        0
                                    ],
                                    [
                                        0.8797105471675044,
                                        0,
                                        0
                                    ],
                                    [
                                        -0.5025364436569841,
                                        0,
                                        0
                                    ]
                                ],
                                "show": true, // 显示路径
                                "loop": true, // 是否为环线
                                "showDirection": false, // 显示方向(默认为true) 
                                "playing": true, // 飞行
                                // 是否循环播放
                                // 如果为false，则playing设置为true时，会从当前位置播放到最后一个关键点，并停止播放，此时playing属性会自动变成false。 若此属性为true时，播放到最后一个关键点以后，将自动重第一个关键点继续播放。
                                "loopPlay": true
                            }
                        }
                    ]
                }

                var model1 = earth.sceneTree.$refs.model1.czmObject;
                var path1 = earth.sceneTree.$refs.path1.czmObject;

                // 设置相机位置
                // earth.camera.position.toString()和earth.camera.toAllJSONStr()这两个方法可获取相机位置
                earth.camera.position = [2.031465662884236, 0.69638480925583, 165.47876552185588];
                earth.camera.rotation = [4.0428248885799904, -0.2997327316327265, 4.261213604195291e-10];

                // 1.1.3 数据绑定
                {
                    // 双向绑定的属性，如果一方发生变化，另一方同样会跟随变化
                    this._showUnbind = XE.MVVM.bind(this, 'show', path1, 'show');
                    this._currentSpeedUnbind = XE.MVVM.bind(this, 'currentSpeed', path1, 'currentSpeed');
                    this._currentDUnbind = XE.MVVM.bind(this, 'currentD', path1, 'currentD');
                    this._cameraAttachedUnbind = XE.MVVM.bind(this, 'cameraAttached', path1, 'cameraAttached');
                    this._playingUnbind = XE.MVVM.bind(this, 'playing', path1, 'playing');

                    // 设置初始值
                    earth.terrainEffect.subSurfaceEnabled = false;
                    earth.terrainEffect.surfaceOpacity = 0.0;
                    this.positionEditing = true; // 默认状态开启位置编辑
                }

                // 1.1.4 数据监控
                // currentPosition 当前相机位置，形式如：[0, 0, 0] 该数组中的元素分别表示经度（单位弧度）、纬度（单位弧度）、高度（单位米）。 注意该属性，为只读属性！
                this._uw1 = XE.MVVM.watch(path1, 'currentPosition', position => {
                    model1.xbsjPosition = [...position];
                });

                // currentRotation 当前相机姿态，形式如：[0, 0, 0] 该数组中的元素分别表示偏航角（单位弧度）、俯仰角（单位弧度）、翻转角（单位弧度）。 注意该属性，为只读属性！
                this._uw2 = XE.MVVM.watch(path1, 'currentRotation', rotation => {
                    var cp = [...rotation];
                    model1.xbsjRotation = [cp[0]-Math.PI*0.5, cp[1], cp[2]];
                });

                this._earth = earth;
                this._model = model1;

                // only for debug
                window.earth = earth;
                window.model = model1;
                window.path1 = path1;
            },
            filters: {
                numFilter(value) {
                    // 截取当前数据到小数点后两位
                    let realVal = parseFloat(value).toFixed(2)
                    return realVal
                }
            },
            methods: {
                cameraAttachedClick() {
                    this.cameraAttached = !this.cameraAttached;
                    // 飞回原始位置
                    if (!this.cameraAttached) {
                        earth.camera.flyTo([2.031465662884236, 0.69638480925583, 165.47876552185588], 0, [4.0428248885799904, -0.2997327316327265, 4.261213604195291e-10]);
                    }
                }
            },
            // 1.2 资源销毁
            beforeDestroy() {
                // vue程序销毁时，需要清理相关资源
                this._earth = this._earth && this._earth.destroy();
                this._model = this._model && this._model.destroy();
                this._uw1 = this._uw1 && this._uw1();
                this._uw2 = this._uw2 && this._uw2();
                this._showUnbind = this._showUnbind && this._showUnbind();
                this._currentSpeedUnbind = this._currentSpeedUnbind && this._currentSpeedUnbind();
                this._currentDUnbind = this._currentDUnbind && this._currentDUnbind();
                this._pinUnbind = this._pinUnbind && this._pinUnbind();
                this._cameraAttachedUnbind = this._cameraAttachedUnbind && this._cameraAttachedUnbind();
                this._playingUnbind = this._playingUnbind && this._playingUnbind();
            },
        }

        // 2 创建vue程序
        // XE.ready()用来加载Cesium.js等相关资源
        XE.ready().then(() => {
            var app = new Vue({
                el: '#vueApp',
                components: {
                    EarthComp,
                },
            });
        });
    </script>
</body>

</html>